<template>
  <div class="dvd-container">
    <div class="dvd-wrap">
      <ul class="dvd-title">
        <li v-for="(item, index) in titlesInfo" :key="item.id">
          <a
            @click="isShowTitle(item.city, index)"
            :class="currentIndex === index ? 'titleText' : ''"
            >{{ item.area }}</a
          >
        </li>
      </ul>
      <ul class="dvd-list">
        <li class="dvd-item" v-for="item in inlandCds" :key="item.picId">
          <div class="dvd-box">
            <div class="dvd-box-bottom">
              <a>
                <img v-imgLazy="item.blurPicUrl" />123
                <i class="dvd-player"></i>
                <i class="dvd-background"></i>
              </a>
            </div>
            <h4 class="dvd-songTitle">
              <span>{{ item.name }}</span>
            </h4>
            <div class="dvd-author">
              <a>{{ item.artists[0].name }}</a>
            </div>
            <div class="dvd-time">2022-11-11</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "Dvd",
};
</script>

<script setup>
import { getAllCds } from "./dvd-request";
import { ref, onMounted } from "vue";
const titles = [
  {
    id: 1,
    area: "内地",
    city: "ZH",
  },
  {
    id: 2,
    area: "欧美",
    city: "EA",
  },
  {
    id: 3,
    area: "韩国",
    city: "KR",
  },
  {
    id: 4,
    area: "日本",
    city: "JP",
  },
  {
    id: 5,
    area: "其他",
    city: "ALL",
  },
];
const currentIndex = ref(0);
const inlandCds = ref([]);
const titlesInfo = ref([]);
titlesInfo.value = titles;
const getInlandCds = async (city) => {
  const res = await getAllCds(city, 40);
  inlandCds.value = res.albums;
};
// console.log(InlandCds);
onMounted(getInlandCds);

// 点击改变颜色

const isShowTitle = (city, index) => {
  // console.log(index);
  currentIndex.value = index;
  getInlandCds(city);
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.dvd-content {
  list-style: none;
}
.dvd-container {
  background-color: #ffffff;
}
.dvd-wrap {
  margin: 0 auto;
  width: 1200px;
  /* height: 1300px; */
  padding-top: 35px;
}
.dvd-title {
  list-style: none;
  width: 900px;
  height: 41px;
  padding-left: 65px;
  display: flex;
}
.dvd-title li {
  width: 44px;
  height: 26px;
  line-height: 26px;
  margin-right: 24px;
  padding-left: 8px;
  font-size: 14px;
  cursor: pointer;
}
.dvd-title li a {
  display: inline-block;
  width: 28px;
  height: 26px;
  padding: 0 8px;
}
.dvd-title li a:hover {
  color: #31c27c;
}

.dvd-list {
  overflow: hidden;
  /* box-sizing: border-box; */
}
.dvd-item {
  list-style: none;
  float: left;
  white-space: nowrap;
}
.dvd-box {
  width: 228px;
  height: 309px;
  padding-right: 20px;
  box-sizing: border-box;
}
.dvd-item {
  margin-bottom: 44px;
  /* box-sizing: border-box; */
}
.dvd-box-bottom {
  width: 210px;
  height: 230px;
  margin-bottom: 15px;
  position: relative;
  overflow: hidden;
}
.dvd-box-bottom img {
  width: 210px;
  height: 230px;
  /* box-sizing: border-box; */
}
.dvd-author a {
  color: #999;
  display: inline-block;
  height: 22px;
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.dvd-author a:hover {
  color: #31c27c;
}
.dvd-time {
  color: #999;
  height: 22px;
  font-size: 14px;
}
.dvd-box h4 {
  font-weight: normal;
  font-size: 14px;
  height: 22px;
}
.dvd-box h4:hover {
  color: #31c27c;
}
.dvd-player {
  position: absolute;
  width: 40px;
  height: 40px;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  /* transform: translate(-50%,-50%); */
  background-image: url(./img/player.png);
  background-size: cover;
  background-position: center;
  /* border: none; */
  opacity: 0;
  margin-left: -30px;
  margin-top: -30px;
}
.dvd-box:hover .dvd-player {
  position: absolute;
  width: 60px;
  height: 60px;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  /* margin-left: -30px;
  margin-top: -30px; */
  transform: translate(-50%, -50%);
  background-image: url(./img/player.png);
  background-size: cover;
  background-position: center;
  opacity: 1;
  transform: scale(1.1);
  transition: all 0.7s;
}
.dvd-background {
  position: absolute;
  width: 210px;
  height: 230px;
  top: 0;
  left: 0;
  background-color: #000;
  z-index: -1;
}
.dvd-box:hover .dvd-box-bottom a img {
  transform: scale(1.1);
  transition: all 0.7s;
}
.dvd-box:hover .dvd-background {
  transition: all 0.7;
  opacity: 0.2;
  z-index: 1;
}
.titleText {
  background-color: #31c27c;
  /* color: #ffffff!important; */
  pointer-events: none;
  color: #ffffff;
}
.dvd-songTitle {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>
